    <div class="row">
      <div class="col-12">
        <h2 class="mb-4">工单查询</h2>
      </div>
    </div>

    <div class="row mb-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">搜索条件</h5>
          </div>
          <div class="card-body">
            <form ng-submit="$ctrl.search()">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label class="form-label">关键字</label>
                  <input type="text" class="form-control" 
                         placeholder="工单号、标题或描述关键字"
                         ng-model="$ctrl.searchCriteria.keyword">
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">状态</label>
                  <select class="form-control" ng-model="$ctrl.searchCriteria.status" ui-select2="{placeholder: '全部状态', allowClear: true}">
                    <option value="">全部状态</option>
                    <option ng-repeat="status in $ctrl.statusOptions" value="{{ status }}">{{ status }}</option>
                  </select>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">优先级</label>
                  <select class="form-control" ng-model="$ctrl.searchCriteria.priority" ui-select2="{placeholder: '全部优先级', allowClear: true}">
                    <option value="">全部优先级</option>
                    <option ng-repeat="priority in $ctrl.priorityOptions" value="{{ priority }}">
                      {{ $ctrl.getPriorityText(priority) }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3 mb-3">
                  <label class="form-label">类别</label>
                  <select class="form-control" ng-model="$ctrl.searchCriteria.category" ui-select2="{placeholder: '全部类别', allowClear: true}">
                    <option value="">全部类别</option>
                    <option ng-repeat="category in $ctrl.categoryOptions" value="{{ category }}">{{ category }}</option>
                  </select>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">处理人</label>
                  <select class="form-control" ng-model="$ctrl.searchCriteria.assignee" ui-select2="{placeholder: '全部处理人', allowClear: true}">
                    <option value="">全部处理人</option>
                    <option ng-repeat="assignee in $ctrl.assigneeOptions" value="{{ assignee.id }}">{{ assignee.name }}</option>
                  </select>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">创建日期从</label>
                  <input type="date" class="form-control" ng-model="$ctrl.searchCriteria.dateFrom">
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">创建日期到</label>
                  <input type="date" class="form-control" ng-model="$ctrl.searchCriteria.dateTo">
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <button type="submit" class="btn btn-primary me-2" ng-disabled="$ctrl.isLoading">
                    <span ng-if="$ctrl.isLoading">
                      <i class="fas fa-spinner fa-spin me-1"></i>搜索中...
                    </span>
                    <span ng-if="!$ctrl.isLoading">
                      <i class="fas fa-search me-1"></i>搜索
                    </span>
                  </button>
                  <button type="button" class="btn btn-secondary me-2" ng-click="$ctrl.reset()" ng-disabled="$ctrl.isLoading">
                    <i class="fas fa-undo me-1"></i>重置
                  </button>
                  <button type="button" class="btn btn-outline-secondary" ng-click="$ctrl.refresh()" ng-disabled="$ctrl.isLoading">
                    <i class="fas fa-sync-alt me-1"></i>刷新
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">工单列表</h5>
            <span class="badge badge-info">共 {{ $ctrl.filteredTickets.length }} 条记录</span>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>工单号</th>
                    <th>标题</th>
                    <th>状态</th>
                    <th>优先级</th>
                    <th>类别</th>
                    <th>处理人</th>
                    <th>创建时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="ticket in $ctrl.filteredTickets" ng-class="{ 'table-warning': ticket.verification_status === 'pending' }">
                    <td><strong>{{ ticket.ticket_number }}</strong></td>
                    <td>
                      <div>{{ ticket.title }}</div>
                      <div ng-if="ticket.verification_status === 'pending'" class="small text-warning">
                        <i class="fas fa-exclamation-triangle"></i> 等待验证
                      </div>
                    </td>
                    <td>
                      <span class="badge" ng-class="$ctrl.getStatusClass(ticket.status)">
                        {{ ticket.status | translate }}
                      </span>
                    </td>
                    <td>
                      <span class="badge" ng-class="$ctrl.getPriorityClass(ticket.priority)">
                        {{ ticket.priority | translate }}
                      </span>
                    </td>
                    <td>{{ ticket.category }}</td>
                    <td>{{ ticket.support_staff_name || '未分配' }}</td>
                    <td>{{ ticket.created_at | date:'yyyy-MM-dd HH:mm' }}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-primary" 
                              ng-click="$ctrl.viewDetails(ticket)">
                        <i class="fas fa-eye"></i> 详情
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
              
              <!-- 加载状态 -->
              <div ng-if="$ctrl.isLoading" class="text-center py-4">
                <div class="spinner-border" role="status">
                  <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2">加载工单列表中...</p>
              </div>
              
              <!-- 无数据状态 -->
              <div ng-if="!$ctrl.isLoading && $ctrl.filteredTickets.length === 0" class="text-center text-muted py-4">
                <i class="fas fa-inbox fa-3x mb-3"></i>
                <p>暂无符合条件的工单</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>